// src/APP.vue

<template>
  <div id="dynamic-arguments-example" class="demo full-page">
    <h2>Scroll down the page</h2>
    <p v-pin:[direction]="pinPadding">Stick me 200px from the {{ direction }} of the page</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'

export default defineComponent({
  name: 'APP',
  directives: { //局部自定义指令
    pin: {
      mounted(el, binding) {
        el.style.position = 'fixed'
        const s = binding.arg || 'top'
        el.style[s] = binding.value + 'px'
      }
    }
  },
  setup() {
    const datas = reactive({
      direction: 'right',
      pinPadding: 200
    })
    return {
      ...toRefs(datas)
    }
  }
})
</script>